<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html>
<head>
<title><s:text name="pl.grabar.clinic.client.web.reception.visit.views.patient" /></title>
	<sj:head locale="pl" jqueryui="true" jquerytheme="smoothness"/>
	<link href="${pageContext.request.contextPath}/static/global/js/jquery-multiple-select/multiple-select.css" rel="stylesheet"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/global/js/jquery-multiple-select/jquery.multiple.select.js"></script>
	<link href="${pageContext.request.contextPath}/static/global/js/select2-3.4.5/select2.css" rel="stylesheet"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/global/js/select2-3.4.5/select2.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/global/js/select2-3.4.5/select2_locale_pl.js"></script>
	
<style type="text/css">
 .wwctrl { 
     margin-left:145px;
     }
</style>

<script type="text/javascript">
   function item(key,value){
    this.id=key;
    this.text=value;
}
   
   function loadSelect2Script(){
       $("#idPatientSelect").select2({
       	placeholder: "Wybierz pacjenta",
           minimumInputLength: 3,
           multiple: false,
           ajax: {
   	        url: "findPatients",
   	        dataType: 'json',
   	        quietMillis: 500,
   	        data: function (term, page) {
   		        return {
   		        regex: term,
   		        page_limit: 10,//page size
   		        page: page,
   		        };
   	        },
   	        results: function (data, page) {				//liczba wszystkich znalezionych
   	        	var more = (page * data.page_limit) < Object.keys(data.listPatients).length ;//tu zamienic na liczbe stron mozliwych do przejrzenia???chyba
   	        	var items =  [];								
       			$.each(data.listPatients, function(key, value) {
   					items.push(new item(key, value));
       			});
   	        return {results: items, more: more};
   	        }
           },
           
//            initSelection : function (element, callback) {
// 			var keys = [];
// 	        $(element.val().split(",")).each(function () {
// 	            keys.push(this);
// 	        });
	        
//            	$.ajax({
//            		 url: "loadContents",
//            		 data: {
//            			 idSelectedDictionary:  $('#idSelectedDictionary').val() ,
//            			 defaultValueList: keys,
//            		 },
//            		 dataType: "json"
//            		 }).done(function(data) { 
//           		        var elements = [];
//   	        			$.each(data.listDictionaryElements, function(key, value) {
//   	        				elements.push(new item(key, value));
//   	        			});
//           			 	callback(elements); });
           	
//            }
           
       });
   }
</script>

</head>
<body>
	<h1>
		<s:if test="visitId != null && !visitId.isEmpty()">
			<s:text name="pl.grabar.clinic.client.web.reception.visit.views.edit.edit-visit">
				<s:param value="existingPatient.firstName" />
				<s:param value="existingPatient.lastName" />
			</s:text>
		</s:if>
		<s:else>
			<s:text name="pl.grabar.clinic.client.web.reception.visit.views.edit.new-visit" />
		</s:else>
	</h1>
	<s:form namespace="/reception/visit" action="save">
		<s:hidden id="idVisitId" name="visitId" />
		
		<s:select id="idSelectedDoctor" list="doctors" name="visitSchedule.doctor" value="visitSchedule.doctor"  label="%{getText('pl.grabar.clinic.client.web.labels.doctor')}" style="width: 300px;"/>
		<script type="text/javascript">
		$("#idSelectedDoctor").multipleSelect({
			placeholder: "Wybierz lekarza",
			filter: true,
			unselectRadio: true,
			single: true,
			onClick: function(view) {
				$("#idSelectedDoctor").multipleSelect({unselectRadio: false});
				$("#idSelectedDoctor").multipleSelect("refresh");
				$("#idSelectedDoctor").multipleSelect('setSelects', [view.value ]);
	        },
		});
	   	</script>
	   	<br></br>
	   	
	   	
	   	<div id="wwgrp_save_visitSchedule_patient" class="wwgrp">
			<div id="wwlbl_save_visitSchedule_patient" class="wwlbl">
				<label for="save_visitSchedule_patient" class="label"><s:text name="pl.grabar.clinic.client.web.labels.patient"> </s:text></label></div> <br>
			<div id="wwctrl_save_visitSchedule_patient" class="wwctrl">
				<input id="idPatientSelect" class="select2-offscreen" name="visitSchedule.patient" value="visitSchedule.patient" type="hidden" style="width:300px" tabindex="-1"></div> 
		</div>
		<script type="text/javascript">
			loadSelect2Script();
		</script>
		
	   	<br></br>
		<s:textfield name="visitSchedule.medicalExaminationType" style="width:295px" label="%{getText('pl.grabar.clinic.client.web.labels.medical-examination-type')}" />
	   	<br></br>
		<s:select onchange="$('#idVisitDate').attr('timepickerStepMinute', this.value)" id="idDurationTime" list="{5,10,15,20,25,30,35,40,50,60}" name="visitSchedule.durationVisitTime" style="width:300px" label="%{getText('pl.grabar.clinic.client.web.labels.duration-visit-time')}(min)" />
	   	<br></br>
		<div id="wwgrp_save_visit_visitDate" class="wwgrp" style="z-index: 15;position: relative;">
		 	<sj:datepicker id="idVisitDate" name="visitSchedule.visitDate" style="width:260px" displayFormat="dd.mm.yy" minDate="0m" maxDate="3m" timepicker="true" timepickerGridHour="4" timepickerGridMinute="15" timepickerStepMinute="5" label="%{getText('pl.grabar.clinic.client.web.labels.visit-date')}"/>
		</div>
		
		<s:submit value="%{getText('pl.grabar.clinic.client.web.buttons.save')}" />
	</s:form>
	
</body>
</html>